$(function () {
  let $info = $('.info');
  let infoStr = '';
  let page = 1;
  let flag = true
  let $prev = $('.prev');
  let $next = $('.next');
  let $select = $('.page');
  //初始化页面
  let init = {
    url: 'http://chst.vip:1234/api/getmoneyctrl',
    success: function (res) {
      pageLength = Math.ceil((res.totalCount / res.pagesize));
      for(let i = 0;i < pageLength;i++){
        let str = ''
        str += `<option value="${i+1}">${i+1}/${pageLength-1}</option>`
        $select.append(str)
      }
      $info[0].innerHTML = "";
      res.result.forEach(element => {
        let reg = /(?<=imgurl=)[^'"]*/;
        let imgUrl = element.productImg2.match(reg);
        infoStr += `      
        <li id=${element.productId}>
          <a href="">
            <div class="img">
              <img src="${imgUrl[0]}" alt="">
            </div>
            <div class="infoR">
              <div class="title">
                <h4>${element.productName}
                  <span>${element.productPinkage}</span>
                </h4>
              </div>
              <div class="other">
                <span>${element.productFrom}|${element.productTime}</span>
                <em>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi"></use>
                  </svg>
                  <span> ${element.productComCount}</span>
                </em>
              </div>
            </div>
          </a>
        </li>`
      });
      $info.append(infoStr);
      infoStr = ''
    },
  }
  //请求数据
  function a (res) {
    $info[0].innerHTML = "";
    res.result.forEach(element => {
      let regExp = /(?<=imgurl=)[^'"]*/;;
      let imgUrl = element.productImg2.match(regExp);
      infoStr += `      
      <li id=${element.productId}>
        <a href="">
          <div class="img">
            <img src="${imgUrl[0]}" alt="">
          </div>
          <div class="infoR">
            <div class="title">
              <h4>${element.productName}
                <span>${element.productPinkage}</span>
              </h4>
            </div>
            <div class="other">
              <span>${element.productFrom}|${element.productTime}</span>
              <em>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <span> ${element.productComCount}</span>
              </em>
            </div>
          </div>
        </a>
      </li>`
    });
    $info.append(infoStr);
    infoStr = ""
  }
  //请求数据
  ajaxAPI(init)
  //按钮逻辑
  if (flag) {
    //切换下一页
    $next.on('click', function () {
      //改变按钮样式
      $prev.prop('disabled', "").css({
        color: "rgb(51,51,51)"
      })
      //页面 小于 页面数  获取下一页数据
      if (page < pageLength) {
        //页面+1
        page++;
        console.log(page);
        //请求下一页数据
        //请求加载商品数据
        let getData = {
          url: 'http://chst.vip:1234/api/getmoneyctrl?pageid=' + page,
          success : a,
        }
        ajaxAPI(getData);
        $select.children().eq(page-1).prop('selected','selected')
        console.log($select.children().eq(page));
      }
      //页面 大于 或等于 页面数 error
      else {
        console.log("1111")
      }
      // 二次判断 若页面数等于页面 改变按钮样式
      if (page === pageLength-1) {
        $(this).prop('disabled', 'disabled').css({
          color: 'rgb(204,204,204)'
        })
      }
    })
    //切换上一页
    $prev.on('click', function () {
      //改变按钮样式
      $next.prop('disabled', "").css({
        color: "rgb(51,51,51)"
      })
      // 页面 大于 1 获取上一页数据
      if (page > 1) {
        page--;
        console.log(page);
        //请求加载商品数据
        let getData = {
          url: 'http://chst.vip:1234/api/getmoneyctrl?pageid=' + page,
          success : a,
        }
        ajaxAPI(getData);
        $select.children().eq(page-1).prop('selected','selected')
        console.log($select.children().eq(page));
      }
      else {
        console.log("1111")
      }
      console.log(page);
      if (page === 1) {
        $(this).prop('disabled', 'disabled').css({
          color: '#ccc'
        })
      }
    })

    $select.on('change',function(){
      console.log($select.val());
      page = $select.val();
      console.log(page);
      let getData = {
        url: 'http://chst.vip:1234/api/getmoneyctrl?pageid=' + page,
        success: a,
      }
      ajaxAPI(getData);
    })
  }

  $info.on('click','li',function(e){
    e.preventDefault()
    console.log($(this).attr('id'));
    window.location.href = './moneyctrlitems.html?productid=' + $(this).attr('id');
  })

})
